@extends('admin.layouts.header_other')
@section('title',"后台管理系统")
@section('content')
    <style>
        .attr_style{ height: auto;margin: 0;padding: 0;}
        .attr_style li{ padding: 5px; float: left;}
    </style>
    <div class="layui-tab">
        <ul class="layui-tab-title">
            <li class="layui-this">基本信息</li>
            <li>选项设置</li>
        </ul>
        <div class="layui-tab-content">

            <div class="layui-tab-item layui-show">
                <form class="layui-form" action="">
                    @csrf
                    <div class="amin-content">
                        <div class="layui-row layui-col-space15">

                            <div class="layui-col-md9">
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">素材标题</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="title" lay-verify="required|title" autocomplete="off" placeholder="请输入素材标题" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">编号</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="serial" lay-verify="required|serial" value="{{$sn_code}}" autocomplete="off" placeholder="编号" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">所属分类</label>
                                        <div class="layui-input-inline">
                                            <select name="downloadcat_id">
                                                <option value="">请选择</option>
                                                @foreach($treeCat as $cat)
                                                    <optgroup label="{{$cat['title']}}">
                                                        @foreach($cat['childer'] as $res)
                                                            <option value="{{$res['id']}}">{{$res['title']}}</option>
                                                        @endforeach
                                                    </optgroup>
                                                @endforeach

                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label">SEO关键字</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="key_seo" lay-verify="pass" placeholder="请输入关键字" autocomplete="off" class="layui-input">
                                    </div>
                                    <div class="layui-form-mid layui-word-aux">（多个请用,隔开）</div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">SEO描述</label>
                                    <div class="layui-input-block">
                                        <textarea name="key_description"  class="layui-textarea"></textarea>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">SEO简介</label>
                                    <div class="layui-input-block">
                                        <textarea  class="layui-textarea" name="info"></textarea>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">内容</label>
                                    <div class="layui-input-block">
                                        <textarea id="demo" name="content" lay-verify="content"  class="layui-textarea"></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md3">
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">价格</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="price" value="" placeholder="请输入价格" class="layui-input" id="test-form-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">模式</label>
                                        <div class="layui-input-inline">
                                            <div class="layui-input-inline">
                                                <select  lay-filter="aihao" name="pattern">
                                                    <option value=""></option>
                                                    @foreach($materialMode as $k=>$v)
                                                    <option value="{{$k}}">{{$v}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">发布时间</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="created_at" id="date" placeholder="发布时间" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">作者</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="author" lay-verify="required" autocomplete="off" placeholder="发布时间" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">来源</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="source" lay-verify="required" autocomplete="off" placeholder="发布时间" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">是否审核</label>
                                        <div class="layui-input-inline">
                                            <input type="radio" name="is_check" value="1" title="审核" checked="">
                                            <input type="radio" name="is_check" value="2" title="待审核">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">授权方式</label>
                                        <div class="layui-input-inline">
                                            <select  lay-filter="aihao" name="grant_method">
                                                <option value=""></option>
                                                @foreach($materialAuthMothod as $k=>$v)
                                                <option value="{{$k}}">{{$v}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>


                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">推荐</label>
                                        <div class="layui-input-inline">
                                            <select  lay-filter="aihao" name="is_hot">
                                                <option value=""></option>
                                                <option value="1">推荐</option>
                                                <option value="2">不推荐</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">头条</label>
                                        <div class="layui-input-inline">
                                            <select name="is_first" lay-filter="aihao">
                                                <option value=""></option>
                                                @foreach($countryInFirst as $k=>$v)
                                                    <option value="{{$k}}">{{$v}}</option>
                                                @endforeach

                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">图片</label>
                                    <div class="layui-inline">
                                        <div class="layui-upload-drag" id="singleUploadImage">
                                            <i class="layui-icon" id="showimg"> </i>
                                            <p>点击上传，或将文件拖拽到此处</p>
                                        </div>

                                    </div>
                                    <input type="hidden" id="uploadimages_input" name="images" value="">
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button class="layui-btn" lay-submit="" lay-filter="countryInsubmit">立即提交</button>
                                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </form>
            </div>
            <div class="layui-tab-item">
                <div class="layui-form-item">
                    <form class="layui-form" action="">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">版权所有</label>
                                <div class="layui-input-inline">
                                    <select name="version_author" lay-filter="aihao">
                                        <option value=""></option>
                                        @foreach($materialVersion as $k=>$v)
                                        <option value="{{$k}}">{{$v}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">版本推荐</label>
                                <div class="layui-input-inline">
                                    <select name="version" lay-filter="aihao">
                                        <option value=""></option>
                                        @foreach($materialReferr as $k=>$v)
                                        <option value="{{$k}}">{{$v}}</option>
                                        @endforeach

                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">授权协议</label>
                                <div class="layui-input-inline">
                                    <input type="radio" name="grant_agree" value="1" title="是" checked="">
                                    <input type="radio" name="grant_agree" value="2" title="否">
                                </div>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">推荐</label>
                            <div class="layui-input-inline" style="width:80%">
                                <div class="layui-row layui-col-space10">
                                    <div class="layui-col-md5">
                                        <table class="layui-hide" id="left_tab" lay-filter="left"></table>
                                    </div>
                                    <div class="layui-col-md2 btn-height">
                                        <div style="margin-bottom: 10px;">
                                            <button class="layui-btn  layui-btn-disabled left-btn">
                                                <i class="layui-icon">&#xe602;</i>
                                            </button>
                                        </div>
                                        <div >
                                            <button class="layui-btn layui-btn-disabled right-btn">
                                                <i class="layui-icon">&#xe603;</i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="layui-col-md5">
                                        <table class="layui-hide" id="right_tab" lay-filter="right"></table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">标签</label>
                                    <div class="layui-input-block">
                                    <ul class="attr_style" id="materialTag">
                                        @foreach($materialTag as $k=>$v)
                                        <li>
                                            <button type="button" class="layui-btn layui-btn-sm"  id="materialTag" attr-data="{{$k}}"><i class="layui-icon"></i> {{$v}}</button>

                                        </li>
                                        @endforeach
                                    </ul>

                                    </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
    <script src="{{asset('attach/js/layui.all.js')}}"></script>
    <script>
        layui.config({
            base: '{{asset('attach/js/lay/extend/')}}'+'/'
        }).use(['transfer','table', 'layer', 'util'],function () {

            var table = layui.table,$ = layui.$;
            var height = 290; //固定表格高度
            layui.data('tabData',{key:'id',value:['4']});
            //计算按钮的高度
            var btn_height = height /2 -44;
            $('.btn-height').css('padding-top',btn_height).css('text-align','center')
            //左边表格
            table.render({
                elem: '#left_tab'
                ,url: "{{route('admin.material.transfer')}}"
                ,where:{type:1}
                ,cols: [[
                    {checkbox: true, fixed: true}
                    ,{field:'id', title: 'ID', width:40, sort: true, fixed: true}
                    ,{field:'title',width:200, title: '标题'}

                ]]
                ,id: 'left_table_id'
                ,page: true
                ,height: height
            });
            //右边表格
            table.render({
                elem: '#right_tab'
                ,url: "{{route('admin.material.transfer')}}"
                ,where:{type:2}
                ,cols: [[
                    {checkbox: true, fixed: true}
                    ,{field:'id', title: 'ID', width:40, sort: true, fixed: true}
                    ,{field:'title', width:200,title: '标题'}

                ]]
                ,data: []
                ,id: 'right_table_id'
                ,page: true
                ,height: height
            });
            //公共方法
            function getTableData(id){
                var checkStatus = table.checkStatus(id)
                    ,data = checkStatus.data;
                return data;
            }
            function btnIf(data,btn){
                if(data && data.length){
                    $(btn).removeClass('layui-btn-disabled')
                }else{
                    $(btn).addClass('layui-btn-disabled')
                }
            }
            //重载左边表格
            function reloadTable() {
                var id = layui.data('tabData').id;
                var id_str = id.join(',');
                table.reload('left_table_id', {
                    page:{curr:1},
                    where: {
                        id: id_str
                    }
                });
                table.reload('right_table_id', {
                    page:{curr:1},
                    where: {
                        id: id_str
                    }
                });
            }
            //监听左表格选中
            table.on('checkbox(left)', function(obj){
                btnIf(getTableData('left_table_id'),'.left-btn')
            });
            //监听右表格选中
            table.on('checkbox(right)', function(obj){
                btnIf(getTableData('right_table_id'),'.right-btn')
            });
            //左按钮点击移动数据
            $('.left-btn').on('click',function(){
                if(!$(this).hasClass('layui-btn-disabled')){
                    $('.left-btn,.right-btn').addClass('layui-btn-disabled')
                    var data = getTableData('left_table_id');
                    //查询缓存是否存在数据
                    var id = layui.data('tabData').id;
                    console.log(id);
                    $.each(data,function(k,v){
                        id.push(v.id)
                    });
                    //存储缓存
                    layui.data('tabData',{key: 'id',value: id})
                   // reloadTable()
                }
            })
            //右按钮点击移动数据
            $('.right-btn').on('click',function () {
                if(!$(this).hasClass('layui-btn-disabled')){
                    $('.left-btn,.right-btn').addClass('layui-btn-disabled')
                    var data = getTableData('right_table_id');
                    //查询缓存存在的数据
                    var id = layui.data('tabData').id;
                    $.each(data,function(k,v){
                        id.splice($.inArray(v.id,id),1) //删除选中的
                    });
                    //存储缓存
                    layui.data('tabData',{ key: 'id',value: id })
                  //  reloadTable()
                }
            })
            //左表数据事件
            table.on('rowDouble(left)', function(obj){
                var id = layui.data('tabData').id;
                id.push(obj.data.id)
                layui.data('tabData',{ key: 'id',value: id })
                //reloadTable()
            });
            //右表双击时间
            table.on('rowDouble(right)', function(obj){
                var id = layui.data('tabData').id;
                id.splice($.inArray(obj.data.id,id),1) //删除选中的
                layui.data('tabData',{ key: 'id',value: id })
              //  reloadTable()
            });
            //默认给值1
            layui.data('tabData',{key:'sumit',value:'1'})
            $('.submit').on('click',function () {
                //提交后改成O
                layui.data('tabData',{key:'sumit',value:'0'})
                //关闭窗口
                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                parent.layer.close(index); //再执行关闭
            })
            //再次进来赋值
            var id = layui.data('tabData').id;
            if(id && id.length){
               // reloadTable();
            }
        })
    </script>
    <script>
        layui.use(['layedit','form','layer','transfer','util'],function () {
            var layedit = layui.layedit;
            var publish_time = layui;
            var publish_time = layui.laydate;
            var colorpicker  = layui.colorpicker;
            var form = layui.form;
            var upload =layui.upload;
            var $ = layui.$
                ,layer = layui.layer;
            //模拟数据


            upload.render({
                elem: '#singleUploadImage'
                ,url: "{{route('admin.images.uploadimages')}}"
                ,data:{'_token':$("#uploadimages").val()}
                ,auto:true
                ,done: function(res){
                    if(res.code==0){
                        $("#showimg").html('<img src="'+res.data.src+'" style="max-width:210px; min-height:136px;" />');
                        $("#uploadimages_input").val(res.data.id);

                    }else{
                        layer.msg(res.msg);
                    }
                }
            });
            colorpicker.render({
                elem: '#test-form' //绑定元素
                ,color:'#1c97f5'
                ,done: function(color){ //颜色改变的回调
                    $("#test-form-input").val(color);
                }
            });
            publish_time.render({
                elem: "#date"
                ,type: 'datetime'
            });
            layedit.set({
                uploadImage: {
                    url: '{{route('admin.images.uploadimages')}}',//接口url
                    type: 'post', //默认post
                    data:{
                        _token:$('meta[name=csrf-token]').attr('content')
                    }
                }
            });
            var index=layedit.build('demo',{
                height:300,
                tool:['left','center','right','|','face','link','unlink','image','help','del','strong','italic','underline']
            });
            form.verify({ //提交表单的时候同步内容到 textarea
                content: function(value) {
                    return layedit.sync(index);
                }
            });
            $(document).on('click','#materialTag',function(){
                $(this).toggleClass(' layui-btn-danger');
                if($(this).hasClass('layui-btn-danger')){
                    $(this).after("<input type='hidden' name='tag[]' value='"+$(this).attr('attr-data')+"'>");
                }else{
                  $(this).next().remove();
                }
            });
            form.on('submit(countryInsubmit)',function (data) {
                var index = parent.layer.getFrameIndex(window.name);
                var url='{{route('admin.material.addsave')}}',
                    data=$(data.form).serialize();
                $.ajax({
                    type:'POST',
                    url:url,
                    data:data,
                    success:function (data) {
                        if(data.code==200){
                            layer.msg(data.msg,{
                                icon:6,
                                time:2000
                            },function () {
                                window.parent.location.reload();//刷新父页面
                                parent.layer.close(index);//关闭弹出层
                            });
                        }else{
                            layer.msg(data.msg,{icon:5});
                            return;
                        }
                    },
                    complete:function () {
                        layer.close(this.layerIndex)
                    }
                })
                return false;
            })
        });
    </script>
@endsection
